<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>湖南省自来水公司营销管理信息系统</title>

	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<style type="text/css">
	table.report { width:300px; margin:0px auto; }
	table.report th,table.report td { padding:10px; font-size:14px;  }
	</style>
</head>

<body>

<div id="wrapper">

<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>

    <div id="content" class="xgrid">
        <div id="app">
            <div class="x12">

                <h2>
                    发票使用情况查询
                    <div style="float:right;">
                        发票使用情况汇总表
                        <a href="inv_invoiceReportUse1.html">发票使用情况明细表</a>
                    </div>
                </h2>

                <div class="searchDiv">


                    <div>
                        <div style="float:left;width:150px;">
                            收费员<select class="medium" v-model="empId">
                            <option value="">全部</option>
                            <option v-for="fr in emp" :value="fr.id">{{fr.empNmae}}</option>
                        </select>
                        </div>

                        <div style="float:left;width:298px;">
                            发票号码 <span class="between">
							<input id="t_invoice1" v-model="startNo" type="number"/>
							<input type="checkbox" id="ck_invoice_between" class="checkbox"
                                   onclick="$('#t_invoice2').toggle();"/>
							<label for="ck_invoice_between">至</label>
							<input id="t_invoice2" class="hide" v-model="endNo" type="number"/>
						</span>
                        </div>

                        <div style="float:left;">
                            使用日期 <span class="between">
							<input id="t_paydate1"  v-model="useDateS" type="date"/>
							<input type="checkbox" id="ck_paydate_between" class="checkbox"
                                   onclick="$('#t_paydate2').toggle();"/>
							<label for="ck_paydate_between">至</label>
							<input id="t_paydate2" class="hide" v-model="useDateE" type="date"/>
						</span>
                        </div>


                    </div>
                    <br/><br/>
                    <div>
                        是否使用 <select v-model="used">
                        <option value="">所有</option>
                        <option value="0">未使用</option>
                        <option value="1">已使用</option>
                    </select>

                        是否作废 <select v-model="invalid">
                        <option value="">所有</option>
                        <option value="0">未作废</option>
                        <option value="1">已作废</option>
                    </select>

                        是否交票 <select v-model="archived">
                        <option value="">所有</option>
                        <option value="0">未交票</option>
                        <option value="1">已交票</option>
                    </select>

                        发票类型 <select v-model="invoiceType">
                        <option value="">所有</option>
                        <option value="0">普通发票</option>
                        <option value="1">增值税发票</option>
                    </select>

                        用户编码 <input/>

                        <button class="btn btn-small btn-icon btn-find" v-on:click="Query">查询</button>
                    </div>


                </div>
                <br/><br/>

                <div class="reportTitle">
                    发票使用情况汇总表
                </div>

                <div v-if="fr==1">
                    <div v-for="l1 in list1">
                        <table class="report">
                            <tbody>
                            <tr>
                                <td align="center">合计张数</td>
                                <td align="right">{{l1.endNo-l1.startNo}}张</td>
                            </tr>
                            <tr>
                                <td align="center">使用张数</td>
                                <td align="right">{{l1.used}} 张</td>
                            </tr>
                            <tr>
                                <td align="center">作废张数</td>
                                <td align="right">{{l1.invalid}} 张</td>
                            </tr>
                            <tr>
                                <td align="center">合计金额</td>
                                <td align="right">17976721.92 元</td>
                            </tr>
                            </tbody>
                        </table>
                        <hr>
                    </div>
                </div>
                <div v-if="fr==2">
                    <div v-for="l2 in list2">
                        <table class="report">
                            <tbody>
                            <tr>
                                <td align="center">起始号码</td>
                                <td align="right">{{l2.StartNo}}</td>
                            </tr>
                            <tr>
                                <td align="center">终止号码</td>
                                <td align="right">{{l2.EndNo}}</td>
                            </tr>
                            <tr>
                                <td align="center">合计张数</td>
                                <td align="right">{{l2.EndNo-l2.StartNo}} 张</td>
                            </tr>
                            </tbody>
                        </table>
                        <hr>
                    </div>
                </div>
                <div v-if="fr==3">
                    <div v-for="l3 in list3">
                        <table class="report">
                            <tbody>
                            <tr>
                                <td align="center">起始日期</td>
                                <td align="right">{{UseDateS}}</td>
                            </tr>
                            <tr>
                                <td align="center">终止日期</td>
                                <td align="right">{{UseDateE}}</td>
                            </tr>
                            <tr>
                                <td align="center">合计张数</td>
                                <td align="right">{{l3.EndNo-l3.StartNo}}张</td>
                            </tr>
                            <tr>
                                <td align="center">使用张数</td>
                                <td align="right"> {{l3.Used}}张</td>
                            </tr>
                            <tr>
                                <td align="center">作废张数</td>
                                <td align="right">{{l3.Invalid}}张</td>
                            </tr>
                            <tr>
                                <td align="center">合计金额</td>
                                <td align="right">17976721.92 元</td>
                            </tr>
                            </tbody>
                        </table>
                        <hr>
                    </div>
                </div>
            </div> <!-- .x12 -->
        </div>
    </div> <!-- #content -->


    <div id="footer">
		<div class="content_pad">
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->

</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript">
    var FPSYQKCX = {
        id: '',
        empId: '',
        empNmae: '',
        startNo: '',
        endNo: '',
        used: '',
        useDateS: '',
        useDateE: '',
        invalid: '',
        archived: '',
        invoiceType: '',
        invoiceNo:'',
        fr: '',
        emp: [],
    };
    var vm = new Vue({
        el: '#app',
        data: FPSYQKCX,
        list1: [],
        list2: [],
        list3: [],
        mounted() {
            axios.get('/FP_LYR').then(response => {
                FPSYQKCX.emp = response.data;
            });
        },
        methods: {
            Query: function () {
                axios.get('/FPSYQKCX', {
                    params: {
                        empId:FPSYQKCX.empId,
                        startNo: FPSYQKCX.startNo,
                        endNo: FPSYQKCX.endNo,
                        useDateS:FPSYQKCX.useDateS,
                        useDateE:FPSYQKCX.useDateE,
                        used:FPSYQKCX.used,
                        invalid:FPSYQKCX.invalid,
                        archived:FPSYQKCX.archived,
                        invoiceType:FPSYQKCX.invoiceType,
                        invoiceNo:FPSYQKCX.invoiceNo
                    }}).then(response=>{
                    if (FPSYQKCX.startNo!=''||FPSYQKCX.endNo!='') {
                        list2=response.data;
                        FPSYQKCX.startNo='';
                        FPSYQKCX.endNo='';
                        FPSYQKCX.fr = '2';
                    }else if(FPSYQKCX.useDateS!=''||FPSYQKCX.useDateS!=''){
                        list3=response.data
                        FPSYQKCX.fr = '3';
                    }else{
                        list1=response.data
                        FPSYQKCX.fr = '1';
                    }
                })


            }
        }
    })
</script>


</body>

</html>